<template>
  <van-grid :column-num="3">
    <view
    class="grid-item"
      v-for="item in list"
      :key="item.id"

    >
      <view class="name">{{ item.coin }}/{{ item.currency }}</view>
      <view class="price">{{ item.price }}</view>
      <view
        class="change"
        :class="{red: item.change < 0, green: item.change > 0}"
      >
        {{ item.change > 0 ? `+${item.change}` : item.change }}%
      </view>
    </view>
  </van-grid>
</template>

<script>
import { mapState, mapActions } from 'vuex'
let timer = null
let isDestroy = false
export default {
  components: {

  },
  props: ['currency'],
  data () {
    return {
      list: []
    }
  },
  computed: {

  },
  created () {
    isDestroy = false
    this.loadData()
  },
  beforeDestroy () {
    isDestroy = true
    clearTimeout(timer)
  },
  methods: {
    loadData () {

      var that=this
      this.socketUser.AjaxRequest(this.API.TICKER_LIST,
      {
        currency: this.currency.name,
        order: 'price',
        order_type: 'desc'
      }, function(res) {

        that.list=res.data.list
        console.log(that.list)
        if (isDestroy) { return }
        clearTimeout(timer)
        timer = setTimeout(() => {
          that.loadData()
        }, 1000)

      },false)

    }
  }
}
</script>

<style scoped lang="less">
.name {
  font-size: 12px;
  font-weight: bold;
}
.price {
  margin: 5px 0;
  font-size: 16px;
  color: #d14b64;
}
.change {
  font-size: 12px;
  &.red {
    color: #d14b64;
  }
  &.green {
    color: #04c2ad;
  }
}
.grid-item{
  width: 33%;
  float: left;
  justify-content: center;
  text-align: center;
}
</style>
